<template>
    <div class="order">
        <VHeader title="我要点单"/>
        <div>
            <div v-if="selectedName.length > 0">
                <div class="flex flex-space-around title">
                    <div v-for="item in selectedName" :key="item" v-text="item"/>
                </div>
            </div>
            <div v-else class="untitle">请选择【乡镇/街办】</div>
        </div>
        <van-cell
                v-for="item in list"
                :key="item.code"
                :title="item.name"
                icon="location-o"
                is-link
                @click="setSelected(item)"
        />
    
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                selectedCode: [],
                selectedName: [],
                selectedIndex: 0,
            }
        },
        methods: {
            async getList(code = 0) {
                let list = await this.$http({
                    method: 'api.diandan.getArea',
                    code,
                })
                if (list.data.list.length <= 0) {
                    this.$router.push({name: 'myOrderCategory', query: {selectedCode: this.selectedCode, selectedName: this.selectedName}})
                } else {
                    this.list = list.data.list
                }
                
            },
            async setSelected(item) {
                this.selectedIndex = this.selectedCode.length
                let slice = this.selectedCode.slice(0, this.selectedIndex)
                slice.push(item.code)
                this.selectedCode = slice
                
                let slice2 = this.selectedName.slice(0, this.selectedIndex)
                slice2.push(item.name)
                this.selectedName = slice2
                
                await this.getList(item.code)
                this.selectedIndex++
            },
        },
        async mounted() {
            await this.getList()
        }
    }
</script>
<style lang="scss" scoped>
    .title {
        padding: 0.3rem 0;
        font-size: 150%;
        color: #F65D5D;
    }
    
    .untitle {
        font-size: 120%;
        padding: 0.3rem;
    }
</style>